<template>
	<view>
		<view class="order-header">
			<view class="order-header-filter">
				<view class="layout">
					<view class="order-header-backend" @click="handleHomeButton()">
						<image src="/static/icon/icon-back.png"></image>
					</view>
					<view class="order-header-tooltip">
						搜索我的订单
					</view>
					<view class="order-header-button">筛选</view>
					<view class="order-header-more">
						<image src="/static/icon/icon-moer.png"></image>
					</view>
				</view>				
			</view>
			<view class="order-header-menu">
				<view class="layout">
					<view class="order-menu-item" @click="filterForm.orderStatus=0">
						<view :class="filterForm.orderStatus == 0?'order-menu-active':''">全部</view>
					</view>
					<view class="order-menu-item" @click="filterForm.orderStatus=1">
						<view :class="filterForm.orderStatus == 1?'order-menu-active':''">待付款</view>
					</view>
					<view class="order-menu-item" @click="filterForm.orderStatus=2">
						<view :class="filterForm.orderStatus == 2?'order-menu-active':''">待收货/使用</view>
					</view>
					<view class="order-menu-item" @click="filterForm.orderStatus=3">
						<view :class="filterForm.orderStatus == 3?'order-menu-active':''">已完成</view>
					</view>
					<view class="order-menu-item" @click="filterForm.orderStatus=4">
						<view :class="filterForm.orderStatus == 4?'order-menu-active':''">已取消</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="orderTotal < 1">
			<view>没有数据</view>
			<view>
				<view @click="refreshOrderList()">刷新一下</view>
			</view>
		</view>
		<view v-else class="order-box">
			<view class="order-box-block" v-for="(order,index) in orderList" :key="index" @click="handleOrderButton(order)">
				<view class="layout">
					<view class="order-box-block-store">{{order.storeData.storeName}}</view>
					<view class="order-box-block-status">{{order.orderStatus.label}}</view>
				</view>
				<view class="order-box-block-shopping layout">
					<view class="order-box-block-shopping-list" v-for="(shopping,subIndex) in order.shopping" :key="subIndex">
						<view class="layout">							
							<view class="order-box-block-shopping-icon">
								<image src="https://exueshi-new-oss.oss-cn-hangzhou.aliyuncs.com/temp/202405/14/b7028f4ddbdd5c6633875edbefe3c6c0.jpg"></image>
							</view>
							<view class="order-box-block-shopping-text">{{shopping.prodName}}</view>
						</view>
					</view>
					<view class="order-box-block-shopping-volume">
						<view class="order-box-block-shopping-volume-price">
							￥{{order.orderAmount}}
						</view>
						<view class="order-box-block-shopping-volume-num">共{{order.shopping.length}}件</view>
					</view>
				</view>
				<view class="order-box-block-button">
					<view class="layout">						
						<view class="order-box-block-button-item">退换/售后</view>
						<view class="order-box-block-button-item">再次购买</view>
						<view class="order-box-block-button-item">评价晒单</view>
						<view class="order-box-block-button-item">删除订单</view>
						<view class="order-box-block-button-item">查看发票</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filterForm:{
					orderStatus:0,
					page:1,
					size:10
				},
				loading:"loaded",
				orderTotal:0,
				orderList:[
					{
						orderID:12313,
						storeData:{
							storeName:"洁柔京东官方旗舰店"
						},
						orderAmount:"120.00",
						shopping:[
							{
								prodName:"洁柔抽纸 粉Face柔韧3层120抽*24包 情妇柔然 原生木浆面",
								prodLogo:""
							}
						],
						orderStatus:{
							value:1,
							label:"完成"
						}
					},
					{
						orderID:12313,
						storeData:{
							storeName:"茶百瑞茶叶京东自营旗舰店"
						},
						orderAmount:"120.00",
						shopping:[
							{
								prodName:"洁柔抽纸 粉Face柔韧3层120抽*24包 情妇柔然 原生木浆面",
								prodLogo:""
							}
						],
						orderStatus:{
							value:1,
							label:"待付款"
						}
					},
					{
						orderID:12313,
						storeData:{
							storeName:"茶百瑞茶叶京东自营旗舰店"
						},
						orderAmount:"120.00",
						shopping:[
							{
								prodName:"洁柔抽纸 粉Face柔韧3层120抽*24包 情妇柔然 原生木浆面",
								prodLogo:""
							}
						],
						orderStatus:{
							value:1,
							label:"待付款"
						}
					},
					{
						orderID:12313,
						storeData:{
							storeName:"茶百瑞茶叶京东自营旗舰店"
						},
						orderAmount:"120.00",
						shopping:[
							{
								prodName:"洁柔抽纸 粉Face柔韧3层120抽*24包 情妇柔然 原生木浆面",
								prodLogo:""
							}
						],
						orderStatus:{
							value:1,
							label:"待付款"
						}
					}
				]
			}
		},
		onLoad(option) {
			this.orderID = 100
			if(option.hasOwnProperty("orderStatus")){
				this.filterForm.orderStatus = option.orderStatus;
			}
			this.orderList = [];
			this.refreshOrderList()
		},
		methods: {
			handleHomeButton:function(){
				uni.switchTab({
					url:"/pages/home/home/home"
				})
			},
			handleOrderButton:function(order){
				uni.navigateTo({
					url:"/pages/home/order-detail/order-detail?orderID="+order.orderID
				})
			},
			refreshOrderList:function(){
				let _this = this
				this.$transaction.getOrderList(_this.filterForm).then(res=>{
					console.log(res)
					if(res.code == 200){
						_this.orderList = res.data.list;
						_this.orderTotal = res.data.total;
					}
				})
			}
		}
	}
</script>

<style>
page { background: #ededed; padding-top: 200rpx; }

.order-header { position: fixed; top:var(--status-bar-height); left: 0; right: 0; padding-top: 25rpx; background: #ededed; z-index: 100; }
.order-header-backend { width: 30rpx; height: 30rpx; padding: 0 25rpx; padding-top: 10rpx;}
.order-header-tooltip { border: #999 1px solid; color: #999; width: 400rpx; border-radius: 25rpx; height: 40rpx; line-height: 40rpx; padding: 5rpx 15rpx; font-size: 12px; }
.order-header-button { width: 100rpx; height: 40rpx; padding-top: 10rpx; padding-left: 80rpx; text-align: center; font-size: 12px; }
.order-header-more { width: 30rpx; height: 30rpx; padding-top: 10rpx;}

.order-menu-item { padding: 30rpx 25rpx; font-size: 14px; background: #ededed; z-index: 99; }
.order-menu-active { font-weight: bold; color: #f30; }

.order-box { padding: 0 25rpx; }
.order-box-block { padding: 15rpx; border-radius: 15rpx; background: #fff; margin-bottom: 20rpx; height: 300rpx; }
.order-box-block-store { width: 350rpx; height: 30rpx; overflow: hidden; font-size: 14px; font-weight: bold; }
.order-box-block-status { width: 300rpx; font-size: 14px; text-align: right; }
.order-box-block-shopping { padding: 15rpx 0; height: 180rpx; }
.order-box-block-shopping-list { width: 550rpx; }
.order-box-block-shopping-icon { width: 180rpx; height: 180rpx; padding-right: 15rpx; }
.order-box-block-shopping-text { width: 370rpx; padding: 50rpx 0; font-size: 14px; line-height: 25px; }
.order-box-block-shopping-volume { width: 150rpx; padding: 50rpx 0; font-size: 14px; }
.order-box-block-shopping-volume-price { text-align: center; }
.order-box-block-shopping-volume-num { text-align: center; }
.order-box-block-button-item { border-radius: 15rpx; padding: 5rpx 10rpx; font-size: 12px; border: #ededed 1px solid; margin-right: 10rpx; }
</style>
